.pageWrapper {
  background-color: #f5f5f5;
  @apply box-border;
}
.navigationBar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  @apply box-border relative top-0 z-50;
}
.navigation {
  @apply relative flex flex-row justify-center items-center box-border;
  .searchIcon {
    @apply absolute left-[32px];
  }
  .filter {
    @apply relative self-stretch text-[32px] text-[#333333];
    &::after {
      content: "";
      height: 6px;
      @apply absolute rounded-[10px] bottom-0 left-[12px] right-[12px];
    }
    &.filterActive {
      @apply font-600 text-[36px];
      &::after {
        @apply bg-[#5278FD];
      }
    }
  }
}
.channels {
  height: 82px;
  @apply whitespace-nowrap box-border;
  .channel {
    height: 82px;
    line-height: 82px !important;
    @apply inline-block mr-[48px] text-[#666666] text-[28px] box-border;
    &.channelActive {
      @apply text-[#333333] font-600;
    }
    &:first-child {
      @apply ml-[32px];
    }
  }
}
.listWrapper {
  height: calc(100vh - var(--navtop) - var(--filterheight, 82px) - 112px);
  @apply box-border py-10px;
}
.list {
  padding-bottom: 112px;
  @apply flex flex-row flex-wrap box-border mx-[32px] mt-[10px] gap-[10px];
}
// .concerns {
//   @apply box-border;
//   .concern {
//     border-bottom: 2px solid #F2F2F2;
//     @apply box-border px-[32px] pt-[32px] pb-[36px];
//     .concernTitle {
//       height: 64px;
//       @apply flex flex-row items-center gap-[16px] box-border;
//       .concernAvatar {
//         width: 64px;
// height: 64px;
//         @apply box-border object-cover block rounded-full;
//       }
//       .concernUser {
//         @apply text-[#333333] text-[28px];
//       }
//     }
//   }
// }
